<template>
  <div class="Fare">
    <div id="Fare_head">
	  <div id="crity_list" v-on:touchstart="crity_list()">
	     <span id="CityName">{{CurrentCity}}</span>
		 <span :class="upAndDown"></span>
	  </div>
	  <span id="head_title">嘟嘟巴士</span>
	</div>
	
	<div class="Crity_items" v-if="isCrity_items">
     <div>
	     <ul>
		     <li><h1>当前位置</h1></li>
			 <li>{{CurrentCity}}</li>
			 <li><h1>选择城市</h1></li>
			 <li v-for="(crity,index) in  ctityList" v-on:touchstart="SelectedCity(index)">{{crity.crityName}}</li>
		 </ul>
	 </div>
  </div>
	 <div id="Fare_nave">  
          <div class="F_n_item">
		        <div :class="{'fn_child':true,'fn_child_Active':child1_active}" v-on:touchstart="Commute()">
				    <span :class="{'spanActive':child1_active}" >上下班</span>
				</div>
		  </div>
          <div class="F_n_item">
		          <div :class="{'fn_child':true,'fn_child_Active':child2_active}" v-on:touchstart="chartered_bus()" >
				    <span :class="{'spanActive':child2_active}" >包车</span>
				</div>
		  </div>		  
	 </div>
	 <div id="Fare_main">
	      <div class="main_content">
		     <div class="start_end">
			   <div class="star_end_import">
			      <div id="log">
				     <div>
					    <p></p>
					 </div>
					 <div id="End">
					    <p></p>
					 </div>
				  </div>
			      <div id="import_wz">
				      <div id="star_addres" v-on:touchstart="star_addres()">
					      <span id="start_place" ref="star_text">{{ satrtText}}</span>
					  </div>
					  <div id="end_addres" v-on:touchstart="end_addres()">
					      <span id="end_place" ref="end_text">{{ endText}}</span>
					  </div>
				  </div>
				  <div id="imgs">
				     <img src="static/imgs/switch_d808aca.png"  v-on:touchstart="Replace_address()" />
				  </div>
			   </div>
			 </div>
			 <div id="a1" >
			     <span v-on:touchstart="JgSeeks()">查询</span>
			 </div>
		  </div>
		  <div class="sxb_rec">附近线路</div>
	 </div>
  </div>
</template>

<script>

export default {
  name: 'hello',
  data () {
    return {
      upAndDown:"glyphicon glyphicon-menu-down",
	  isCrity_items:false,
	  child1_active:true,
	  child2_active:false,
	  ctityList:[],
	  CurrentCity:"北京"
	 
	  }
    },
	activated(){
	  
	},
	created(){
	   this.jzCrity();
      
	},
	mounted(){
	    
	},
	methods:{
	   jzCrity(){
	        this.$axios.get("http://localhost/dudubas_crity_jz.php").then(e1=>{
			     this.ctityList = e1.data
			})
	   },
	   SelectedCity(ins){
             this.CurrentCity = this.ctityList[ins].crityName;
             this.isCrity_items = false;			 
	   },
	   crity_list(){
	       if(this.upAndDown == "glyphicon glyphicon-menu-down"){
	       this.upAndDown = "glyphicon glyphicon-menu-up";
		   this.isCrity_items =true;
	      }else{
	       this.upAndDown = "glyphicon glyphicon-menu-down";
		     this.isCrity_items =false;
	     }
	        
	   },
	   Commute(){
	       this.child1_active=true;
		  this.child2_active=false;  
	   },
	   chartered_bus(){
	      this.child1_active=false;
		  this.child2_active=true;
		  this.$router.push({
		     path:"/Chartered_bus"
		  })
	   },
	   JgSeeks(){
	      this.$router.push({
		     path:"/Jgseek"
		  })
	   },
	   star_addres(){
	         this.$router.push({
			   path:"/AddresSeek"
			   
			 })
			 this.$store.commit("isStart",0);
	   },
	   end_addres(){
	       this.$router.push({
			   path:"/AddresSeek"
			 })
			  this.$store.commit("isStart",1);
	   },
	   Replace_address(){
	       var temporary = ""
	       temporary = this.$refs.star_text.innerText;
		   this.$refs.star_text.innerText = this.$refs.end_text.innerText
		   this.$refs.end_text.innerText = temporary
	   }
	},
	computed:{
	      satrtText(){
		      return this.$store.state.startAdd;
		  },
		  endText(){
		      return this.$store.state.endAdd;
		  }
	}
  }

</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.Fare{
      background:#f1f1f1;
	  width:100%;
	  height:100vh;
	  
   }
#Fare_head{ 
           width:100%;
	       height:8vh;
           background:#ff4a39;		   
		   position:fixed;
		   line-height:8vh;
           text-align:center;
		  
		 } 
#Fare_nave{ 
              width:100%;
			  height:8vh;
			  background:#ffffff;
			  position:fixed;
			  top:8vh;
			  display:flex;
			  justify-content:center;
			  align-items:center;
          }	
.F_n_item{
         width:50%;
          height:60%;
          display:flex;
		  justify-content:center;
	      align-items:center;
          border-right:1px solid black;
          		  
     }
	 .fn_child{width:85%;
	           height:100%;
			    background:#ffffff;
				border-radius:4px;
				display:flex;
			  justify-content:center;
			  align-items:center;
			  font-size:1.6rem;
			  color:#9d9da3;
	       }
	.fn_child_Active{
	        background:#ff4a39;
	   }
     	.spanActive{color:#ffffff;}   
#Fare_nave .F_n_item:last-child{border-right:none;}	 
#Fare_main{
         width:100%;
		 height:91vh;
         padding-top:16vh;
		 posiction:relative;
     }		 
#head_title{
        color:#ffffff;
		font-size: 1.6rem;
		margin-right:12vw;
		}
#crity_list{
    width:20vw;
	height:9vh;
	float:left;
	font-size:1.6rem;
	color:#ffffff;
}	
.main_content{
     width:100%;
	 height:35%;
}
.start_end{
      width:96%;
	  height:67%;
	  
	  margin-left:2%;
	  display:flex;
	  justify-content:center;
	  align-items:center;
 }
 .star_end_import{
     width:100%;
	 height:80%;
	 background:#ffffff;
	  border-radius:5px;
	  display:flex;
	  justify-content:center;
	  align-items:center;
 }
 #a1{
      width:96%;
	   height:30%;
	  margin-top:1vh;
	  margin-left:2%;
	  display:flex;
	  justify-content:center;
	  align-items:center; 
	  
 }
 #a1 span{
     display:block;
      width:100%;
	  height:70%;
	  border-radius:5px;
	  font-size:2.5rem;
	  color:#ffffff;
	  background:#ff4a39;
	  text-align:center;
	  line-height:70%;
	  display:flex;
	  justify-content:center;
	  align-items:center; 
 }
 .sxb_rec {
    color: #9d9da3;
    text-align: center;
    margin: 15px 0;
}
.sxb_rec:after {
    margin: 0 0 0 5px;
}
.sxb_rec:before, .sxb_rec:after {
    content: '';
    display: inline-block;
    vertical-align: middle;
    width: 50px;
    height: 1px;
    background: #d9d9d9;
    margin-right: 5px;
}
#import_wz{
  width:70%;
  height:100%;
  
}
#import_wz div{
    width:100%;
	height:50%;
	 display:flex;
	 
	  align-items:center; 
}
#import_wz div:nth-child(2){
    border-top:1px solid #cccccc;
}
#import_wz span{
   font-size:1.6rem;
   color:#cccccc;
}
#log{width:8%;
      height:100%;
    }
	#log div{
	   width:100%;
	   height:50%;
	   display:flex;
	  justify-content:center;
	  align-items:center; 
	}
#log p{
      margin-top:5vh;
      margin:0;
      width:16px;
	  height:30px;
	  background:url(../assets/22-52-25.png) no-repeat;
	  background-size:50px 24px;
}
#End p{
     background-position-x: -18px;
	
}
#imgs{
     width:15%;
	 height:60%;
	
	  display:flex;
	  justify-content:center;
	  align-items:center; 
}
#imgs img{
    width:30px;
	height:30px;
}
.Crity_items{
      background:#ffffff;
	  width:100%;
	  height:100vh;
	  position:fixed;
	  top:8vh;
	  z-index:100;
   }
   
.Crity_items li{
     width:100%;
	 height:5vh;
	 background:#ffffff;
	 display:flex;
	 padding-left:2vw;
	 align-items:center;
	 font-size:1.6rem;
	 border-bottom:1px solid ##eceff4;
}
  .Crity_items ul li:nth-child(1){
     background:#eceff4;
  }
  .Crity_items ul li:nth-child(3){
     background:#eceff4;
  }
  .Crity_items h1{
      font-size:1.8rem;color:#a89daa;
  }
</style>
